<template>
  <div>
    <h1>filter过滤器，可被用于一些常见的文本格式化</h1>
    <h2>{{ message }}</h2>
    <!-- 在双花括号中 -->
    <!-- message指实参， capitalize指方法调用   | 是管道符-->
    <!-- {{ message | capitalize }} 相当于==>capitalize（message） -->
    <h2>{{ message | capitalize }}</h2>

    <!-- {{ message | capitalize | fn }} 相当于==>fn(capitalize（message）) -->
    <h2>{{ message | capitalize | fn }}</h2>

  </div>
</template>

<script>
export default {
  // 这里是局部：这个方法将第一个字母转成大写
  // 全局，在main.js中：在创建 Vue 实例之前全局定义过滤器：
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    fn(value) {
      // value指的是capitalize（message）
      return value + '前前'
    }
  },
  data() {
    return {
      message: 'abc-hello'
    }
  }
}
</script>

<style>

</style>
